// 搜索输入框 滚动页面子组件
<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div class="scroll-content">
      <div v-if="data">
        <!-- 没有搜索到相关结果的盒子 -->
        <no-data-tip
          v-show="
            (!data.viewDatas || data.viewDatas.length <= 0) &&
            (!data.foodDatas || data.foodDatas.length <= 0) &&
            (!data.hotelDatas || data.hotelDatas.length <= 0) &&
            (!data.massageDatas || data.massageDatas.length <= 0) &&
            (!data.ktvDatas || data.ktvDatas.length <= 0)
          "
        ></no-data-tip>
        <!-- 结果显示的盒子 -->
        <div v-if="data.viewDatas && data.viewDatas.length > 0">
          <home-title title="景点结果:"></home-title>
          <view-list :viewDatas="data.viewDatas"></view-list>
        </div>
        <div v-if="data.foodDatas && data.foodDatas.length > 0">
          <home-title title="美食结果:"></home-title>
          <food-list :foodDatas="data.foodDatas"></food-list>
        </div>
        <div v-if="data.hotelDatas && data.hotelDatas.length > 0">
          <home-title title="酒店结果:"></home-title>
          <hotel-list :hotelDatas="data.hotelDatas"></hotel-list>
        </div>
        <div v-if="data.massageDatas && data.massageDatas.length > 0">
          <home-title title="按摩结果:"></home-title>
          <massage-list :massageDatas="data.massageDatas"></massage-list>
        </div>
        <div v-if="data.ktvDatas && data.ktvDatas.length > 0">
          <home-title title="KTV结果:"></home-title>
          <ktv-list :ktvDatas="data.ktvDatas"></ktv-list>
        </div>
      </div>
      <error :errorShow="data.status === -1"></error>
    </div>
  </div>
</template>

<script>
import BetterScroll from "better-scroll";

//导入组件
import HomeTitle from "./Sub/HomeTitle";
import ViewList from "./ViewList/Index";
import FoodList from "./FoodList/Index";
import HotelList from "./HotelList/Index";
import MassageList from "./MassageList/Index";
import KtvList from "./KtvList/Index";
import NoDataTip from "./Sub/NodataTip";
import Error from "./Sub/Error";

export default {
  name: "SearchScrollWrapper",
  components: {
    HomeTitle: HomeTitle,
    ViewList: ViewList,
    FoodList: FoodList,
    HotelList: HotelList,
    MassageList: MassageList,
    KtvList: KtvList,
    NoDataTip: NoDataTip,
    Error: Error,
  },
  props: {
    data: Object,
    viewDatas: Object,
  },
  mounted: function () {
    this.scroll = new BetterScroll(this.$refs.wrapper);
  },
};
</script>

<style lang="scss" scoped>
</style>